<html>
    <head>
        <title>prop验证</title>
    </head>
    <body>
        <script>
            // 五、Prop验证 (属性验证)

                              /*
                                  我们可以为组件的 prop 指定验证要求， 例如你知道的这些类型。 如果有一个需求没有被满足，则Vue会在浏览器控制台中警告你。
                                  这在开发一个会被别人用到的组件时尤其有用。

                                  为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组：
                              */

                              Vue.component('my-component',{
                                                   props:{
                                                        // 基础的类型检查 ('null' 和 'undefined'会通过任何类型验证)
                                                        propA:Number,

                                                        // 多个可能的类型
                                                        propB:[String,Number],

                                                        // 必填的字符串
                                                        propC:{
                                                          type:String,
                                                          required:true
                                                        },

                                                        // 带有默认值的数字
                                                        propD:{
                                                          type:Number,
                                                          default:100
                                                        },

                                                        // 带有默认值的对象
                                                        propE:{
                                                          type:Object,
                                                          // 对象或数组的默认值必须从一个工厂函数获取
                                                          default:function(){
                                                            return {message:'hello'}
                                                          }
                                                        },

                                                        // 自定义验证函数
                                                        propF:{
                                                          validator:function(value){
                                                            // 这个值必须匹配下列字符串中的一个
                                                            return ['success','warning','danger'].includes(value);
                                                          }
                                                        }

                                                   }
                                               });

                                      // 当prop验证失败的时候，Vue将会产生一个控制台的警告。

                                  /*
                                      注意： 
                                              那些prop会在一个组件实例创建之前进行验证，
                                              所以实例的property (例如，data、computed、methods) 在 defualt 或 validator 中是不能使用的。 
                                  */

                                  // 1、类型检查
                                            /*
                                               type 可以使下列原生构造函数中的一个：
                                                  String,
                                                  Number,
                                                  Boolean,
                                                  Array,
                                                  Object,
                                                  Date,
                                                  Function,
                                                  Symbol
                                            */
                                            /*
                                                另外，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。

                                                例如： 给定下列现成的构造函数：
                                            */  
                                               function Person(firstName,lastName){
                                                    this.firstName=firstName
                                                    this.lastName=lastName
                                               }

                                            // 你可以使用：
                                                  Vue.component('blog-post',{
                                                      props:{
                                                        author:Person
                                                      }
                                                  })
                                                  // 来验证 author prop 的值是否是通过 new Person 创建的。
        </script>
    </body>
</html>